
            /*
                 Initialize and render the MenuBar when the page's DOM is ready
                 to be scripted.
            */

            YAHOO.util.Event.onDOMReady(function () {

                                var onMenuItemClick = function () {
                                        alert("Callback for MenuItem: " + this.cfg.getProperty("text"));
                                };

                /*
                     Define an array of object literals, each containing
                     the data necessary to create the items for a MenuBar.
                */

                var aItemData = [

                    {
                        text: "File",
                        submenu: {
                            id: "filemenu",
                            itemdata: [

                                { text: "New File", helptext: "Ctrl + N", onclick: { fn: onMenuItemClick }, keylistener: { ctrl: true, keys: 78 } },
                                "New Folder",
                                { text: "Open", helptext: "Ctrl + O", onclick: { fn: onMenuItemClick }, keylistener: { ctrl: true, keys: 79 } },
                                {
                                    text: "Open With...",
                                    submenu: {
                                        id: "applications",
                                        itemdata: [
                                            "Application 1",
                                            "Application 2",
                                            "Application 3",
                                            "Application 4"
                                        ]
                                    }
                                },
                                { text: "Print", helptext: "Ctrl + P", onclick: { fn: onMenuItemClick }, keylistener: { ctrl: true, keys: 80 } }

                            ]
                        }

                    },
                    
                    {
                        text: "Edit",
                        submenu: {
                            id: "editmenu",
                            itemdata: [

                                [
                                    { text: "Undo", helptext: "Ctrl + Z", onclick: { fn: onMenuItemClick }, keylistener: { ctrl: true, keys: 90 } },
                                    { text: "Redo", helptext: "Ctrl + Y", disabled: true }
                                ],

                                [
                                    { text: "Cut", helptext: "Ctrl + X", disabled: true },
                                    { text: "Copy", helptext: "Ctrl + C", disabled: true },
                                    { text: "Paste", helptext: "Ctrl + V", onclick: { fn: onMenuItemClick }, keylistener: { ctrl: true, keys: 86 } },
                                    { text: "Delete", helptext: "Del", disabled: true }
                                ],

                                [ { text: "Select All", helptext: "Ctrl + A", onclick: { fn: onMenuItemClick }, keylistener: { ctrl: true, keys: 65 } } ],

                                [
                                    { text: "Find", helptext: "Ctrl + F", onclick: { fn: onMenuItemClick }, keylistener: { ctrl: true, keys: 70 } },
                                    { text: "Find Again", helptext: "Ctrl + G", onclick: { fn: onMenuItemClick }, keylistener: { ctrl: true, keys: 71 } }
                                ]

                        ] }

                    },

                    "View",

                    "Favorites",

                    "Tools",

                    "Help"
                ];


                /*
                                        Instantiate a Menu:  The first argument passed to the constructor
                                        is the id for the Menu element to be created, the second is an
                                        object literal of configuration properties.
                */

                var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
                                                            lazyload: true,
                                                            itemdata: aItemData
                                                            });

                 /*
                     Since this MenuBar instance is built completely from
                     script, call the "render" method passing in a node
                     reference for the DOM element that its should be
                     appended to.
                */

                oMenuBar.render(document.body);


                // Add a "show" event listener for each submenu.

                function onSubmenuShow() {

                                        var oIFrame,
                                                oElement,
                        nOffsetWidth;


                                        // Keep the left-most submenu against the left edge of the browser viewport

                                        if (this.id == "yahoo") {

                                                YAHOO.util.Dom.setX(this.element, 0);

                                                oIFrame = this.iframe;


                                                if (oIFrame) {

                                                        YAHOO.util.Dom.setX(oIFrame, 0);

                                                }
                                                this.cfg.setProperty("x", 0, true);

                                        }


                                        /*
                                                Need to set the width for submenus of submenus in IE to prevent the mouseout
                                                event from firing prematurely when the user mouses off of a MenuItem's
                                                text node.
                                        */

                    if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {

                        oElement = this.element;
                        nOffsetWidth = oElement.offsetWidth;
                        
                        /*
                            Measuring the difference of the offsetWidth before and after
                            setting the "width" style attribute allows us to compute the
                            about of padding and borders applied to the element, which in
                            turn allows us to set the "width" property correctly.
                        */

                        oElement.style.width = nOffsetWidth + "px";
                        oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";

                    }

                }


                // Subscribe to the "show" event for each submenu

                oMenuBar.subscribe("show", onSubmenuShow);
            });
